<template>
  <div class="addRole">
    <header>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/roleManage' }" class="homePage">内部员工管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加员工</el-breadcrumb-item>
      </el-breadcrumb>
      <p>添加员工</p>
    </header>
    <main>
      <div class="userInfo">
        <desc-title :descTitle="'员工信息'"></desc-title>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="178px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名:" prop="username">
            <el-input v-model="ruleForm.username" clearable></el-input>
          </el-form-item>
          <el-form-item label="手机号:" prop="mobile">
            <el-input v-model="ruleForm.mobile" clearable></el-input>
          </el-form-item>
          <el-form-item label="部门:" prop="department">
            <el-select v-model="ruleForm.department" placeholder="请选择部门" clearable>
              <el-option v-for="item in departList" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职位:" >
            <el-input v-model="ruleForm.position" clearable maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="角色:" prop="roleId">
            <el-select v-model="ruleForm.roleId" placeholder="请选择角色" clearable>
              <el-option v-for="item in roleList" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账号状态:" prop="isUse">
            <el-select v-model="ruleForm.isUse" clearable>
              <el-option
                v-for="item in isUseList"
                :key="item.id"
                :value="item.name"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    <footer>
      <span class="sureEdit" @click="sureAdd('ruleForm')">确定</span>
    </footer>
    </main>

  </div>
</template>

<script>
import { validTelephone } from '@/utils/validate'
import { addRole, roleList } from '@/api/roleManage'
export default {
  data () {
    const validPhone = (rule, value, callback) => {
      if (validTelephone(value)) {
        callback()
      } else {
        callback(new Error('请输入正确的手机号格式'))
      }
    }
    return {
      // 部门列表
      departList: [],
      roleList: [],
      ruleForm: {
        username: '',
        mobile: '',
        department: '',
        roleId: '',
        isUse: '',
        position: ''
      },
      // 状态列表
      isUseList: [
        { id: 0, name: '禁用' },
        { id: 1, name: '启用' }
      ],
      rules: {
        username: [
          { required: true, trigger: 'blur', message: '用户姓名不能为空' }
        ],
        mobile: [
          { required: true, trigger: 'blur', message: '手机号不能为空' },
          { validator: validPhone, trigger: 'blur' }
        ],
        department: [
          { required: true, trigger: 'change', message: '请选择部门' }
        ],
        roleId: [
          { required: true, trigger: 'change', message: '请选择角色' }
        ],
        isUse: [
          { required: true, trigger: 'change', message: '请选择状态' }
        ]
      }
    }
  },
  methods: {
    // 获取部门列表
    getDepartList () {
      this.$store.dispatch('roleManage/getDepartList').then(res => {
        this.departList = res.data.data
      })
    },
    getroleList () {
      roleList().then(res => {
        this.roleList = res.data.data.data
      })
    },
    // 添加用户按钮
    sureAdd (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const { username, mobile, department, roleId, isUse } = this.ruleForm
          const registerDTO = {
            username,
            mobile,
            department,
            roleId,
            isUse: isUse === '启用' ? 1 : 0
          }
          addRole(registerDTO).then(res => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: res.data.message
              })
              this.$router.push('/roleManage')
            } else {
              this.$message({
                type: 'error',
                message: res.data.message
              })
            }
          })
        } else {
          return false
        }
      })
    }
  },
  created () {
    this.getDepartList()
    this.getroleList()
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-form-item__label {
  width: 300px !important;
  text-align: right;
  height: 48px;
  line-height: 48px;
}
::v-deep .el-form-item__content {
  float: left;
}

::v-deep .el-input__inner {
  height: 48px;
}

.addRole {
  height: 100%;
  padding: 0 30px 30px;
  header {
    height: 114px;

    .el-breadcrumb {
      height: 58px;
      line-height: 58px;
    }
    p {
      font-size: 24px;
      color: #333;
      font-weight: bold;
    }
  }
  main {
    padding: 30px 30px 0 30px;
    background-color: #fff;
    border-radius: 5px;
    min-height: calc(100% - 114px);

    .userInfo {
      p {
        font-size: 18px;
        height: 36px;
        line-height: 36px;
        color: #333;
        vertical-align: middle;
        position: relative;
        span {
          display: inline-block;
          border-left: 4px solid #4868ff;
          height: 18px;
          vertical-align: middle;
        }
        i {
          font-style: normal;
          position: absolute;
          right: 0;
          width: 84px;
          height: 36px;
          border-radius: 18px;
          background-color: #4868ff;
          text-align: center;
          line-height: 36px;
          color: #fff;
          font-size: 14px;
          cursor: pointer;
        }
      }
      .el-form {
        padding-top: 30px;
        padding-bottom: 28px;
        .el-form-item {
          margin-bottom: 32px;
        }
        .el-input {
          width: 400px;
        }

        .el-select {
          width: 400px;
        }
      }
    }

    table {
      margin-top: 24px;
      width: 100%;
      thead {
        th {
          background-color: rgba(87, 131, 255, 0.05);
          height: 60px;
          font-weight: normal;
          font-size: 14px;
          color: #333333;
          border-bottom: 1px solid #e6e6e6;
          text-align: left;
          padding-left: 24px;
        }
      }

      tbody {
        tr {
          td {
            color: #666666;
            font-size: 14px;
            text-align: left;
            padding-left: 24px;
            height: 60px;
            border-bottom: 1px solid #e6e6e6;
            span {
              color: #fb4646;
              text-decoration: underline;
              cursor: pointer;
            }
          }
          .green {
            color: #2ebb25;
          }
          .yellow {
            color: #ffb415;
          }
        }
      }
    }

    .empty {
      height: 64px;
      text-align: center;
      border-bottom: 1px solid #f2f2f2;
      position: relative;

      span {
        line-height: 64px;
        color: #666;
        font-size: 14px;
      }

      .atlast {
        position: absolute;
        bottom: -50px;
        left: 270px;
        font-size: 12px;
        color: #FF2B2B;
      }
    }
  }

  footer {
    position: absolute;
    bottom: 30px;
    background-color: #fff;
    padding-left: 300px;
    padding-top: 30px;
    padding-bottom: 30px;
    .sureEdit {
      width: 172px;
      height: 48px;
      line-height: 48px;
      color: #fff;
      background-color: #4868FF;
      border-radius: 24px;
      display: inline-block;
      text-align: center;
      cursor: pointer;
      font-size: 18px;
    }
  }
  .addProject {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
}
</style>
